fieldset {
  @include th {
    background-color: secondary-background-color();
    border: base-border();
  }
  margin: 0 0 $small-spacing;
  padding: $base-spacing;
}

input {
  line-height: normal;
  color: inherit;
}

input,
select {
  display: block;
  font-family: $base-font-family;
  font-size: $base-font-size;
}

label {
  display: inline-block;
  font-family: $base-font-family;
  font-size: $base-font-size;
  font-weight: 600;
  margin-bottom: $small-spacing / 2;

  &.required::after {
    content: "*";
  }

  abbr {
    display: none;
  }
}

input[type=text], input[type=password], textarea, input:not([type]) {
  border-radius: $base-border-radius;
  box-sizing: border-box;
  font-family: $base-font-family;
  font-size: $base-font-size;
  margin-bottom: $small-spacing;
  padding: $base-spacing / 3;
  transition: border-color $base-duration $base-timing;

  &::-ms-clear { display: none; }

  @include th {
    color: text-color();
    background-color: background-color();
    border: base-border();
    box-shadow: form-box-shadow();

    &:hover {
      border-color: accent-border-color();
    }

    &:focus {
      border-color: action-color();
      box-shadow: form-box-shadow-focus();
      outline: none;
    }

    &:disabled {
      background-color: disabled-background-color();
      cursor: not-allowed;

      &:hover {
        border: base-border();
      }
    }

    &.input--error, &.input--error:hover, &.input--error:focus, &:invalid {
      border-color: error-color();
      box-shadow: form-box-shadow-focus-error();
      @include selection(true) {
        background-color: text-selection-bg-color-error();
      }
    }
  }

  &.input-padding-right {
    padding-right: 1.7em;
  }

  @include placeholder {
    @include th { color: muted-color(); }
  }
}

textarea {
  resize: vertical;
}

input[type="search"] {
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right: $small-spacing / 2;

  + label {
    display: inline-block;
  }
}

input[type="file"] {
  margin-bottom: $small-spacing;
  width: 100%;
}

select {
  margin-bottom: $base-spacing;
  max-width: 100%;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  transition: border-color $base-duration $base-timing;
  border-radius: $base-border-radius;
  padding-left: $base-spacing / 3;

  background-image: url();
  background-position: calc(100% - 5px) center;
  background-size: 10px;
  background-repeat: no-repeat;

  @include th {
    background-color: background-color();
    border: base-border();
    color: text-color();
    box-shadow: form-box-shadow();
    &:hover {
      border-color: accent-border-color();
    }
    &:focus {
      border-color: action-color();
      box-shadow: form-box-shadow-focus();
      outline: none;
    }
    &:disabled {
      background-color: disabled-background-color();
      cursor: not-allowed;
      &:hover {
        border: base-border();
      }
    }
  }
  &::-ms-expand { display: none; }
}

option {
  @include th {
    background-color: background-color();
    color: text-color();
  }
}

input[type=checkbox] {
  display: none;

  &:not([disabled]) + label:hover:before {
    @include th {
      color: action-color();
    }
  }
  & + label:before {
    @include fa-icon;
    content: $fa-var-square-o;
    display: inline-block;
    width: 1.3em;
    @include th {
      color: text-color();
    }
  }
  &:checked + label:before {
    content: $fa-var-check-square-o;
  }
}

$thumb-size: 14px;

&input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 12px 0;
  padding: 0;
  &:focus { outline: none; }
  &::-webkit-slider-runnable-track {
    @include th { background: text-color(); }
    width: 100%;
    height: 1px;
    cursor: pointer;
    border-radius: 1px;
    border: none;
  }
  &::-webkit-slider-thumb {
    @include th { background: text-color(); }
    border: none;
    height: $thumb-size;
    width: $thumb-size;
    border-radius: $thumb-size;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6.5px;
  }
  &::-moz-range-track {
    @include th { background: text-color(); }
    width: 100%;
    height: 1px;
    cursor: pointer;
    border-radius: 1px;
    border: none;
  }
  &::-moz-range-thumb {
    @include th { background: text-color(); }
    border: none;
    height: $thumb-size;
    width: $thumb-size;
    border-radius: $thumb-size;
    cursor: pointer;
  }
  &::-moz-focus-outer {
    border: 0;
  }
  &::-ms-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: $thumb-size 0;
    color: transparent;
  }
  &::-ms-tooltip {
    display: none;
  }
  &::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper {
    @include th { background: text-color(); }
  }
  &::-ms-thumb {
    border: none;
    height: $thumb-size;
    width: $thumb-size;
    border-radius: $thumb-size;
    cursor: pointer;
    @include th { background: text-color(); }
  }
}



.input-base {
  width: 60%;
  @include tablet {
    width: calc(100% - 20px);
  }
}
